<template>
    <div>
    
        <p>============子组件start============</p>
    
        {{ age }}
    
        <!-- {{ show }}  -->
    
        <!-- <button @click="$emit('update:age',age+10)">1</button> -->
    
        <button @click="$emit('update-age',age+10)">+1</button>
    
        <!-- <button @click="$emit('update:show',!show)">1</button> -->
    
        <p class="test-p">============子组件end============</p>
        <p class="test-p1" id="abc" name="cde">============8888888============</p>
        <a href="#apptest">apptest</a>
        <p class="test-p1" id="abc" name="cde">============8888888============</p>
    
    
    </div>
</template>
  
<script>
export default {
    name: 'ZiZi',
    props: ['age'],
    model: {
      prop: 'age',
      event: 'update-age'
    },

    data() {
        return {
            name: '小米',
            obj: {
                age: 1,
                name: '喜喜'
            }
        }
    },
    created(){
        // console.log("params=>",this.$route.params);
        // console.log("query=>",this.$route.query);
    },
    // beforeRouteEnter(to, from, next){
    //     console.log('beforeRouteEnter=to=>',to);
    //     console.log('beforeRouteEnter=from=>',from);
    //     console.log('beforeRouteEnter=next=>',next);
    //     next()
    // },
    // beforeRouteUpdate(to, from, next){
    //     console.log('beforeRouteUpdate=to=>',to);
    //     console.log('beforeRouteUpdate=from=>',from);
    //     console.log('beforeRouteUpdate=next=>',next);
    //     next()
    // },
    // beforeRouteLeave(to, from, next) {
    //     console.log('beforeRouteLeave=to=>',to);
    //     console.log('beforeRouteLeave=from=>',from);
    //     console.log('beforeRouteLeave=next=>',next);
    //     next()
    // },
    methods: {
        zi() {
            this.$print()
        }
    }
}
</script>
<style scoped>
.test-p{
    background-color: aquamarine;
    height: 1000px;
}
.test-p1{
    background-color: orange;
    height: 200px;
}
</style>